<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: url(img/1.jpg) no-repeat;
			}
			.head{
				height: 200px;				
			}
			.pic{
				padding: 10px 10px;
				margin: 0px auto;
				 background: rgba(255,255,255,0.3);
			}
		</style>
	</head>
	<body>

			<div class="pic">
				<img src="img/1.jpg" name="img/1.jpg" width="200px"/>
				<img src="img/2.jpg" name="img/2.jpg"width="200px"/>
				<img src="img/3.jpg" name="img/3.jpg"width="200px"/>
				<img src="img/4.jpg" name="img/4.jpg"width="200px"/>
				<img src="img/5.jpg" name="img/5.jpg"width="200px"/>
			</div>
			<script>
				var picName = document.getElementsByTagName("img");	
				var body = document.getElementsByTagName("body")[0];
				for(var i=0;i<=picName.length;i++){
					picName[i].onclick=function(){
						body.style.background="url("+this.name+")";
					}
				}
			</script>
	</body>
</html>
